<template>
  <view :style="themeColor">
    <view class="page">
      <view class="flex benben-position-layout flex flex-wrap align-center psychologicalCounseling_flex_0"
        :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
        <view class='flex flex-wrap align-center justify-between flex-sub psychologicalCounseling_fd0_0'>
          <view class='flex flex-wrap align-center psychologicalCounseling_fd0_0_c0' @tap.stop="handleJumpDiy"
            data-type="back" data-url="1">
            <text class='fu-iconfont2  psychologicalCounseling_fd0_0_c0_c0'>&#xE794;</text>
          </view>
          <view class='flex flex-wrap align-stretch justify-center'>
            <text class='psychologicalCounseling_fd0_0_c1_c0'>{{$t('预约参访')}}</text>
          </view>
          <view class='flex flex-wrap align-center justify-end psychologicalCounseling_fd0_0_c0'
            @tap.stop="handleJumpDiy" data-type="navigateTo" :data-url="`/pages/wode/myAppointment/myAppointment`">
            {{$t('我的预约')}}
          </view>
        </view>

      </view>
      <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout psychologicalCounseling_flex_1">
        <view class='flex flex-wrap align-center'>
          <text class='psychologicalCounseling_fd1_0_c0'>{{$t('团体信息')}}</text>
        </view>
        <view class='flex flex-wrap align-center justify-between psychologicalCounseling_fd1_1'>
          <text class='psychologicalCounseling_fd1_1_c0'>{{$t('申请单位')}}</text>
          <input class='psychologicalCounseling_fd1_1_c1' type="text" :placeholder="$t('请输入')" confirm-type="done"
            :maxlength="10" placeholder-style="color:#999;font-size:28rpx" v-model="tutorObj.company" />
        </view>
        <view class='flex flex-wrap align-center justify-between psychologicalCounseling_fd1_1'>
          <text class='psychologicalCounseling_fd1_1_c0'>{{$t('参观人数')}}</text>
          <input class='psychologicalCounseling_fd1_1_c1' type="number" :placeholder="$t('请输入')" confirm-type="done"
            :maxlength="10" placeholder-style="color:#999;font-size:28rpx" v-model="tutorObj.number" />
        </view>
        <view class='flex flex-wrap align-center justify-between psychologicalCounseling_fd1_1'>
          <text class='psychologicalCounseling_fd1_1_c0'>{{$t('联络人')}}</text>
          <input class='psychologicalCounseling_fd1_1_c1' type="text" :placeholder="$t('请输入')" confirm-type="done"
            :maxlength="10" placeholder-style="color:#999;font-size:28rpx" v-model="tutorObj.name" />
        </view>
        <!-- <view class='flex flex-wrap align-center'>
        </view> -->

        <view class='flex flex-wrap align-center justify-between psychologicalCounseling_fd1_1'>
          <text class='psychologicalCounseling_fd1_1_c0'>{{$t('联系邮箱')}}</text>
          <input class='psychologicalCounseling_fd1_1_c1' type="text" :placeholder="$t('请输入')" confirm-type="done"
            :maxlength="20" placeholder-style="color:#999;font-size:28rpx" v-model="tutorObj.phone" />
        </view>
        <view class='flex flex-wrap align-center justify-between psychologicalCounseling_fd1_1'
          @tap.stop="afterTime1703427636768=true">
          <text class='psychologicalCounseling_fd1_1_c0'>{{$t('预约时间')}}</text>
          <view class='flex flex-wrap align-center justify-end flex-sub'>
            <input class='psychologicalCounseling_fd1_1_c1' type="text" :placeholder="$t('请选择')" confirm-type="done"
              :maxlength="20" :disabled='true' placeholder-style="color:#999;font-size:28rpx" v-model="tutorObj.time" />
            <image class='psychologicalCounseling_fd1_4_c1_c1' mode="aspectFit" :src='STATIC_URL+"84.png"'></image>
          </view>
        </view>
        <view class='flex flex-wrap align-center justify-between psychologicalCounseling_fd1_1'
          @tap.stop="isshowcan=true">
          <text class='psychologicalCounseling_fd1_1_c0'>{{$t('参访日期')}}</text>
          <view class='flex flex-wrap align-center justify-end flex-sub'>
            <input class='psychologicalCounseling_fd1_1_c1' type="text" :placeholder="$t('请选择')" confirm-type="done"
              :maxlength="20" :disabled='true' placeholder-style="color:#999;font-size:28rpx"
              v-model="tutorObj.canfangriqi" />
            <image class='psychologicalCounseling_fd1_4_c1_c1' mode="aspectFit" :src='STATIC_URL+"84.png"'></image>
          </view>
        </view>
        <view class='flex flex-wrap align-center justify-between psychologicalCounseling_fd1_1'
          @tap.stop="isShowdida=true">
          <text class='psychologicalCounseling_fd1_1_c0'>{{$t('预计抵达时间')}}</text>
          <view class='flex flex-wrap align-center justify-end flex-sub'>
            <input class='psychologicalCounseling_fd1_1_c1' type="text" :placeholder="$t('请选择')" confirm-type="done"
              :maxlength="20" :disabled='true' placeholder-style="color:#999;font-size:28rpx"
              v-model="tutorObj.daodashijian" />
            <image class='psychologicalCounseling_fd1_4_c1_c1' mode="aspectFit" :src='STATIC_URL+"84.png"'></image>
          </view>
        </view>
        <view class='flex flex-wrap align-center justify-between psychologicalCounseling_fd1_1'
          @tap.stop="ishowlikai=true">
          <text class='psychologicalCounseling_fd1_1_c0'>{{$t('预计离开时间')}}</text>
          <view class='flex flex-wrap align-center justify-end flex-sub'>
            <input class='psychologicalCounseling_fd1_1_c1' type="text" :placeholder="$t('请选择')" confirm-type="done"
              :maxlength="20" :disabled='true' placeholder-style="color:#999;font-size:28rpx"
              v-model="tutorObj.likaishijian" />
            <image class='psychologicalCounseling_fd1_4_c1_c1' mode="aspectFit" :src='STATIC_URL+"84.png"'></image>
          </view>
        </view>
        <view class='flex flex-wrap align-center justify-between psychologicalCounseling_fd1_1'>
          <text class='psychologicalCounseling_fd1_1_c0'>{{$t('留寺午斋')}}</text>
          <benben-select-diy ref="showSelectPopup172282875931222" class-name='flex flex' default-type="aid"
            :items.sync="isArrX" v-model=" tutorObj.is_lisi" default-label="name" :allow-cancel='false' type="radio"
            :disabled='false'>
            <template v-for='(item,key0) in isArrX'>
              <view v-if="item.isSelected" class='flex align-center flex Publishvehicles_fd4_2_c10_c1_c0' :key="key0"
                @tap="$refs.showSelectPopup172282875931222.tapHandle(key0)">
                <image class='Publishvehicles_fd4_2_c10_c1_c0_c0' mode="aspectFit" :src='STATIC_URL+"2.png"'>
                </image>
                <text>{{item.name}}</text>
              </view>
              <view v-else class='flex align-center flex Publishvehicles_fd4_2_c10_c1_c0' :key="key0"
                @tap="$refs.showSelectPopup172282875931222.tapHandle(key0)">
                <image class='Publishvehicles_fd4_0_c0' mode="aspectFit" :src='STATIC_URL+"3.png"'></image>
                <text class='Publishvehicles_fd4_2_c10_c1_c1_c1'>{{item.name}}</text>
              </view>
            </template>
          </benben-select-diy>
        </view>
        <view class='flex flex-direction flex-wrap align-stretch psychologicalCounseling_fd1_5'>
          <text class='psychologicalCounseling_fd1_0_c0'>{{$t('备注')}}</text>
          <view class='flex flex-wrap psychologicalCounseling_fd1_5_c1'>
            <textarea class='flex psychologicalCounseling_input_fd1_5_c1' :placeholder="$t('请输入~')" :maxlength="240"
              placeholder-style="color:#999;font-size:28rpx" v-model="tutorObj.remker" />

          </view>
        </view>
        <view style="padding-bottom: 200rpx;">
          <jyf-parser :html="content | richTextFormat"></jyf-parser>
        </view>
      </view>

      <!---flex布局flex布局结束-->
      <!--选择时间开始 -->
      <benben-after-time-popup :date-time.sync='tutorObj.time' z-index='99' :is-show-now='true' title='选择时间'
        now-text='立即送出' expand='3' start-time='09:00' end-time='18:00' time-interval='30'
        v-model="afterTime1703427636768"></benben-after-time-popup>
      <!--选择时间结束 -->
      <!--参访日期 -->
      <benben-after-time-popup :date-time.sync='tutorObj.canfangriqi' z-index='99' :is-show-now='true' title='选择时间'
        now-text='立即送出' expand='3' start-time='09:00' end-time='18:00' time-interval='30'
        v-model="isshowcan"></benben-after-time-popup>
      <!--参访日期 -->
      <!--预计抵达时间 -->
      <benben-after-time-popup :date-time.sync='tutorObj.daodashijian' z-index='99' :is-show-now='true' title='选择时间'
        now-text='立即送出' expand='3' start-time='09:00' end-time='18:00' time-interval='30'
        v-model="isShowdida"></benben-after-time-popup>
      <!--预计抵达时间 -->
      <!--预计离开时间 -->
      <benben-after-time-popup :date-time.sync='tutorObj.likaishijian' z-index='99' :is-show-now='true' title='选择时间'
        now-text='立即送出' expand='3' start-time='09:00' end-time='18:00' time-interval='30'
        v-model="ishowlikai"></benben-after-time-popup>
      <!--预计离开时间 -->
      <!---flex布局flex布局开始-->
      <view class="flex benben-flex-layout flex-wrap align-center psychologicalCounseling_flex_3">
        <button class='psychologicalCounseling_fd3_0' @tap.stop="submitCounselingFunc()">{{$t('立即预约')}}</button>
      </view>

      <!---flex布局flex布局结束-->


    </view>
  </view>
</template>
<script>
  import {
    validate
  } from '@/common/utils/validate.js'
  export default {
    components: {},


    data() {
      return {
        isShowdida: false,
        ishowlikai: false,
        isshowcan: false,
        content: '',
        "afterTime1703427636768": false,
        "tutorObj": {
          "name": "",
          "phone": "",
          "time": "",
          "remker": "",
          company: '',
          number: '',
          daodashijian: '',
          canfangriqi: '',
          likaishijian: '',
          is_lisi: '1',
        },
        isArrX: [{
          name: '是',
          aid: '1'
        }, {
          name: '否',
          aid: '0'
        }],
        is_lisi: '1',
      };
    },
    computed: {
      themeColor() {
        return this.$store.getters.themeColor
      },

    },
    watch: {},
    onLoad(options) {
      this.getData()
      // this.getAuditingFunc()
    },
    onUnload() {

    },
    onReady() {

    },
    onShow() {

    },
    onHide() {

    },
    onResize() {

    },
    onPullDownRefresh() {

    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {
      getData() {
        this.$api.get(global.apiUrls.post6711fe82472d2, {
          aid: 1
        }).then(res => {
          if (res.data.code == 1) {
            this.content = res.data.data.content
          }
        })
      },
      async getAuditingFunc() {
        //请求方法
        //数据验证

        let dataauditing = await this.$api.get(global.apiUrls.post656190dec1426, {});

        if (dataauditing.data.code != 1) {
          this.$message.info(dataauditing.data.msg);
          return
        }
        let infoauditing = dataauditing.data;
        this.tutorObj.name = infoauditing.data.true_name
        this.tutorObj.remker = infoauditing.data.remark
        this.tutorObj.phone = infoauditing.data.mobile
        this.tutorObj.time = infoauditing.data.time

        this.tutorObj.likaishijian = infoauditing.data.likaishijian
        this.tutorObj.canfangriqi = infoauditing.data.canfangriqi
        this.tutorObj.daodashijian = infoauditing.data.daodashijian
        this.tutorObj.company = infoauditing.data.company
        this.tutorObj.number = infoauditing.data.number
        this.tutorObj.is_lisi = infoauditing.data.is_lisi

      },
      //提交心里辅导
      async submitCounselingFunc() {
        if (!validate(this.tutorObj.name, 'require')) {
          this.$message.info(global.i18n.t('姓名不能为空'));
          return false;
        }
        if (!validate(this.tutorObj.phone, 'require')) {
          this.$message.info(global.i18n.t('邮箱不能为空'));
          return false;
        }
        if (!validate(this.tutorObj.phone, 'email')) {
          this.$message.info(global.i18n.t('请填写正确的邮箱'));
          return false;
        }
        if (!validate(this.tutorObj.time, 'require')) {
          this.$message.info(global.i18n.t('请选择时间'));
          return false;
        }

        if (!validate(this.tutorObj.likaishijian, 'require')) {
          this.$message.info(global.i18n.t('预计离开时间'));
          return false;
        }
        if (!validate(this.tutorObj.canfangriqi, 'require')) {
          this.$message.info(global.i18n.t('请选择参访日期'));
          return false;
        }
        if (!validate(this.tutorObj.daodashijian, 'require')) {
          this.$message.info(global.i18n.t('请选择预计抵达时间'));
          return false;
        }

        if (!validate(this.tutorObj.remker, 'require')) {
          this.$message.info(global.i18n.t('备注不能为空'));
          return false;
        }
        //请求方法
        //数据验证

        let data6561909058204 = await this.$api.post(global.apiUrls.post6561909058204, {
          true_name: this.tutorObj.name,
          mobile: this.tutorObj.phone,
          time: this.tutorObj.time,
          remark: this.tutorObj.remker,

          likaishijian: this.tutorObj.likaishijian,
          canfangriqi: this.tutorObj.canfangriqi,
          daodashijian: this.tutorObj.daodashijian,
          company: this.tutorObj.company,
          number: this.tutorObj.number
        });

        if (data6561909058204.data.code != 1) {
          this.$message.info(data6561909058204.data.msg);
          return
        }



        this.$message.info('预约成功');
        setTimeout(() => {
          this.$urouter.navigateTo(`/pages/shouye/tutoringReview/tutoringReview?id=&state=yuyue`);
        }, 500)
      }
    }
  };
</script>
<style lang="scss" scoped>
  .Publishvehicles_fd4_0_c0 {
    width: 32rpx;
    height: 32rpx;
    margin: 0rpx 16rpx 0rpx 0rpx;
  }

  .Publishvehicles_fd4_2_c10_c1_c0_c0 {
    width: 32rpx;
    height: 32rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    margin: 0rpx 16rpx 0rpx 0rpx;
  }

  .Publishvehicles_fd4_2_c10_c1_c1_c1 {
    color: var(--benbenFontColor2);
  }

  .Publishvehicles_fd4_2_c10_c1_c0 {
    margin: 0rpx 0rpx 0rpx 24rpx;
  }

  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: rgba(247, 243, 237, 1);
    background-size: 100% auto;
  }

  .psychologicalCounseling_flex_0 {
    border-bottom: 1px solid #eee;
    background: rgba(247, 243, 237, 1);
    width: 750rpx;
    height: 88rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
    background-size: 100% auto !important;
  }

  .psychologicalCounseling_fd0_0_c1_c0 {
    font-size: 36rpx;
    font-weight: 700;
    color: #333333;
    line-height: 50rpx;
  }

  .psychologicalCounseling_fd0_0_c0_c0 {
    font-size: 36rpx;
    color: #333;
  }

  .psychologicalCounseling_fd0_0_c0 {
    width: 120rpx;
  }

  .psychologicalCounseling_fd0_0 {
    padding: 0rpx 32rpx 0rpx 32rpx;
  }

  .psychologicalCounseling_flex_1 {
    padding: 32rpx 32rpx 0rpx 32rpx;
  }

  .psychologicalCounseling_input_fd1_5_c1 {
    width: 100%;
    height: 218rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #333;
    white-space: pre-wrap;
  }

  .psychologicalCounseling_fd1_5_c1 {
    border: 1px solid rgba(232, 229, 216, 1);
    background: rgba(247, 243, 237, 1);
    width: 676rpx;
    border-radius: 40rpx;
    padding: 24rpx;
    margin: 24rpx 0rpx 0rpx 0rpx;
  }

  .psychologicalCounseling_fd1_5 {
    margin: 24rpx 0rpx 0rpx 0rpx;
  }

  .psychologicalCounseling_fd1_4_c1_c1 {
    width: 14rpx;
    height: 26rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    margin: 0rpx 0rpx 0rpx 16rpx;
  }

  .psychologicalCounseling_fd1_1_c1 {
    text-align: right;
  }

  .psychologicalCounseling_fd1_1_c0 {
    color: #333333;
    font-size: 32rpx;
    font-weight: 400;
    line-height: 32rpx;
  }

  .psychologicalCounseling_fd1_1 {
    border-bottom: 1px solid #eee;
    padding: 32rpx 0rpx 32rpx 0rpx;
  }

  .psychologicalCounseling_fd1_0_c0 {
    color: #333333;
    font-size: 32rpx;
    font-weight: 500;
    line-height: 42rpx;
  }

  .psychologicalCounseling_flex_3 {
    position: fixed;
    bottom: calc(64rpx + var(--window-bottom));
    left: 32rpx;

  }

  .psychologicalCounseling_fd3_0 {
    background: rgba(145, 47, 34, 1);
    border-radius: 44rpx;
    width: 686rpx;
    line-height: 80rpx;
    font-size: 32rpx;
    color: #fff;
  }
</style>
